<template>
    <view class="content">
        <image src="../../static/image/logo_2.png" class="logo-2"></image>
		<view class="title">一诺健康</view>
		<view class="nav">
			<view class="nav-i" :class="{active : type == 1}" @click="chooseNav(1)">中国大陆</view>
			<view class="nav-i" :class="{active : type == 2}" @click="chooseNav(2)">中国香港</view>
			<view class="nav-i" :class="{active : type == 3}" @click="chooseNav(3)">中国澳门</view>
			<view class="nav-i" :class="{active : type == 4}" @click="chooseNav(4)">中国台湾</view>
			<view class="nav-i" :class="{active : type == 5}" @click="chooseNav(5)">护照</view>
		</view>
		
		<view class="box">
			<view class="item">
				<view>姓名</view>
				<input type="text" v-model="name" placeholder="请输入姓名" class="inp">
			</view>
			<view class="item" v-if="type != 5">
				<view>身份证号</view>
				<input type="idcard" v-model="idcard" placeholder="请输入身份证号" class="inp">
			</view>
			
			<template v-if="type == 5">
				<view class="item">
					<view>护照</view>
					<input type="text" v-model="idcard" placeholder="请输入护照" class="inp">
				</view>
				<view class="item">
					<view>性别</view>
					<view class="item-r">
						<view @click="sex == 1">
							<image :src="sex == 1 ? '../../static/icon/choose_1.png' : '../../static/icon/choose_2.png'" class="choose-1"></image>
							<view>女</view>
						</view>
						<view @click="sex == 2">
							<image :src="sex == 2 ? '../../static/icon/choose_1.png' : '../../static/icon/choose_2.png'" class="choose-1"></image>
							<view>男</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view>出生日期</view>
					<input type="text" v-model="birthday" placeholder="请选择" class="inp" disabled @click="show = true">
				</view>
			</template>
			
			<view class="tip">
				<u-icon name="error-circle-fill" color="#fe8929" size="30" class="u-m-t-5"></u-icon>
				<view class="u-p-l-10">
					请填写使用此卡人员信息，此卡一经绑定<text>无法解绑</text>和<text>赠送</text>。
				</view>
			</view>
		</view>
		<view class="btn" @click="doSubmit">立即绑定</view>
		
		<u-picker v-model="show" mode="time" @confirm="confirmTime"></u-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				show: false,
                type: 1,//1-大陆 2-香港 3-澳门 4-台湾 5-护照
				card_id: '',
				name: '',
				idcard: '',
				sex: 1,
				birthday: '',
            };
        },
        onLoad(option) {
            if (option.card_id) {
        		this.card_id = option.card_id
        	}
        },
        methods: {
			doSubmit() {
				if (!this.name) {
					this.$toast('请输入姓名')
					return
				}
				if (this.type != 5) {
					if (!this.idcard) {
						this.$toast('请输入身份证号')
						return
					}
					if (!this.$testIdCard(this.idcard)) {
						this.$toast('身份证号格式不正确')
						return
					}
				} else {
					if (!this.idcard) {
						this.$toast('请输入护照')
						return
					}
					if (!this.birthday) {
						this.$toast('请选择出生日期')
						return
					}
				}
				
				this.$ajax('bindCard', {
				    userToken: this.$getSync('userToken'),
					card_id: this.card_id,//健康卡编号
					idcard: this.idcard,
					nickname: this.name,
					sex: this.sex == 1 ? '女' : '男',
					birthday: this.birthday,
					type: this.type,// 1-大陆 2-香港 3-澳门 4-台湾 5-护照
				}).then(ret => {
					if (ret.status == 0) {
				        this.$toast('提交成功')
						setTimeout(() => {
							this.$backT()
						}, 500)
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
            chooseNav(num) {
				this.type = num
			},
			
			confirmTime(e) {
				console.log(e)
				this.birthday = e.year + '-' + e.month + '-' + e.day
			},
        }
    };
</script>

<style lang="scss">
	
    page{
    	background: linear-gradient(to top,#f5f5f5,#f5f5f5,#f5f5f5,#03b8b4);
    }
    .content{
    	padding: 20rpx;
    	min-height: 100vh;
    }
	.logo-2{
		width: 103rpx;
		height: 103rpx;
		margin: 0 auto;
	}
	.title{
		font-size: 38rpx;
		font-weight: bold;
		color: #fff;
		text-align: center;
		padding-top: 4rpx;
		padding-bottom: 40rpx;
	}
	.nav{
		background-color: #fff;
		border-radius: 15rpx;
		margin-bottom: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.nav-i{
		width: calc(710rpx / 5);
		font-size: 28rpx;
		text-align: center;
		padding: 30rpx 0;
	}
	.active{
		color: #00b6bc;
		position: relative;
	}
	.active::after{
		display: block;
		content: '';
		width: 32rpx;
		height: 8rpx;
		background-color: #00b6bc;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.box{
		padding: 0 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 30rpx;
	}
	.item{
		padding: 35rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.item:last-child{
		border-bottom: none;
	}
	.item-r{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.item-r>view{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 65rpx;
	}
	.choose-1{
		width: 35rpx;
		height: 35rpx;
		margin-right: 12rpx;
	}
	.inp{
		flex: 1;
		text-align: right;
		padding-left: 15rpx;
	}
	.tip{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 18rpx;
		margin-top: 20rpx;
		background-color: #fff5ec;
		border-radius: 4rpx;
		font-size: 24rpx;
		color: #909090;
	}
	.tip>view>text{
		color: #fe8929;
	}
	
	.btn{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		margin: 70rpx 0;
		background: #01b8bd;
		border-radius: 50rpx;
	}

</style>
